<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>功能导航</title>
    <style>
        .function-content{
            width: 1544.4px;
            margin-left: 52px;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
        }
        .woshi-space{
            width: 776.4px;
        }
        .space-button{
            background-color: #F58220;
            width: 208.4px;
            text-align: center;
            font-size: 20px;
            line-height: 40.8px;
            border-radius: 20.4px;
            color: #FFFFFF;
        }
        .xuqiu-list{
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            flex-wrap: wrap;
            width: 650px;
        }
        .xuqiu-item{
            width: 150px;
            margin-top: 50px;
            color: #B7B7B7;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .item-bgd{
            width: 74px;
            height: 74px;
            background-color: #B7B7B7;
            border-radius: 74px;
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
        }
        .item-selected{
            color: #F58220;
        }
        .item-bgd-selected{
            background-color: #F58220;
        }
        .xuqiu-foot{
            width: 650px;
            text-align: center;
            color: #B7B7B7;
            font-size: 18px;
            margin-top: 50px;
        }
        .xuqiu-input{
            background-color: #EDEDED;
            width: 358px;
            height: 35px;
            border: #EDEDED 0px solid;
            outline: 0;
            font-size: 18px;
            margin-top: 21px;
            border-radius: 17.5px;
            padding-left: 10px;
        }
        .you-addr{
            width: 1544.4px;
            margin-left: 52px;
            text-align: right;
            color: #7E7E7E;
            font-size: 19px;
            margin-top: 22px;
        }
        .xuqiu-button-foot{
            width: 1544.4px;
            margin-left: 52px;
            display: flex;
            flex-direction: row;
            justify-content: center;
            margin-top: 22px;
        }
        .xuqiu-button{
            background-color: #F58220;
            padding: 6px 29px;
            border-radius: 19px;
            color: #FFFFFF;
            margin: 0 15px;
        }
        .edge-space{
            width: 108px;
            height: 46px;
            border-radius: 23px 0 0 23px;
            position: absolute;
            top: 740px;
            right: 0;
            background-color: #F58220;
            line-height: 46px;
            text-align: center;
            color: #FFFFFF;
        }
        .edge-space-2{
            width: 108px;
            height: 46px;
            border-radius: 23px 0 0 23px;
            position: absolute;
            top: 806px;
            right: 0;
            background-color: #F58220;
            line-height: 46px;
            text-align: center;
            color: #FFFFFF;
        }
        .show-info{
            width: 678px;
            height: 453px;
            position: absolute;
            top: 314px;
            left: 621px;
            display: none;
        }
        .add-space{
            position: absolute;
            top: 0px;
            right: 0px;
            width: 490px;
            height: 1080px;
            background-color: rgba(245, 130, 32, 0.9);
            display: flex;
            flex-direction: column;
            align-items: center;
            color: #FFFFFF;
            display: none;
        }
        .change-space{
            position: absolute;
            top: 0px;
            right: 0px;
            width: 490px;
            height: 1080px;
            background-color: rgba(245, 130, 32, 0.9);
            display: flex;
            flex-direction: column;
            align-items: center;
            color: #FFFFFF;
            display: none;
        }
        .add-button{
            width: 246px;
            height: 60px;
            margin-top: 90px;
            background-color: #FFFFFF;
            border-radius: 14px;
            text-align: center;
            line-height: 60px;
            color: #F58220;
            font-size: 30px;
        }
        .space-list{
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
        .space-item{
            margin-top: 60px;
            font-size: 26px;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            width: 490px;
        }
        .space-selected{
            font-weight: bold;
            border-bottom: #FFFFFF 2px solid;
            width: 120px;
            padding: 0 60px 22px 60px;
        }
        .space-sure{
            position: absolute;
            bottom: 129px;
            width: 126px;
            height: 60px;
            font-size: 26px;
            color: #F58220;
            background-color: rgba(255, 255, 255, 0.86);
            text-align: center;
            line-height: 60px;
            border-radius: 14px;
        }
        .change-button-list{
            position: absolute;
            bottom: 129px;
        }
        .change-button{
            background-color: rgba(255, 255, 255, 0.86);
            padding: 17px 37px;
            color: #F58220;
            border-radius: 14px;
            margin: 0 24px;
        }
    </style>
    <link rel="stylesheet" href="css/base.css">
</head>
<body>
    <div class="heard">
        <img src="img/woniu_logo@2x.png" style="width: 307px;height: 68px;margin-left: 8px;margin-top: 63px;">
        <div class="right-top">
            <div class="heard-item">
                <img src="img/woniu_self@2x.png" style="width: 37px;height: 37px;margin-bottom: 14px;">
                <div>个人主页</div>
            </div>
            <div class="heard-item" onclick="showNavigation()">
                <img src="img/woniu_caidan@2x.png" style="width: 31px;height: 37px;margin-bottom: 14px;">
                <div>功能导航</div>
            </div>
        </div>
    </div>
    <div class="content" style="background-color: #FAFAFA;">
        <div style="height: 61px;"></div>
        <div class="function-content">
            <div class="woshi-space">
                <div class="space-button">6/9 臥室空间</div>
                <div style="font-size: 20px;margin-top: 30px;color: #F58220;">你对卧室空间的功能是否有以下需求？</div>
                <div class="xuqiu-list">
                    <div class="xuqiu-item item-selected" onmouseover="mouseOver()" onmouseout="mouseOut()">
                        <div class="item-bgd item-bgd-selected">
                            <img src="img/test.png" style="max-width: 50px;max-height: 50px;">
                        </div>
                        <div style="margin-top: 18px;">保险柜</div>
                    </div>
                    <div class="xuqiu-item">
                        <div class="item-bgd">
                            <img src="img/test.png" style="max-width: 50px;max-height: 50px;">
                        </div>
                        <div style="margin-top: 18px;">保险柜</div>
                    </div>
                    <div class="xuqiu-item">
                        <div class="item-bgd">
                            <img src="img/test.png" style="max-width: 50px;max-height: 50px;">
                        </div>
                        <div style="margin-top: 18px;">保险柜</div>
                    </div>
                    <div class="xuqiu-item">
                        <div class="item-bgd">
                            <img src="img/test.png" style="max-width: 50px;max-height: 50px;">
                        </div>
                        <div style="margin-top: 18px;">保险柜</div>
                    </div>
                    <div class="xuqiu-item">
                        <div class="item-bgd">
                            <img src="img/test.png" style="max-width: 50px;max-height: 50px;">
                        </div>
                        <div style="margin-top: 18px;">保险柜</div>
                    </div>
                    <div class="xuqiu-item">
                        <div class="item-bgd">
                            <img src="img/test.png" style="max-width: 50px;max-height: 50px;">
                        </div>
                        <div style="margin-top: 18px;">保险柜</div>
                    </div>
                    <div class="xuqiu-item">
                        <div class="item-bgd">
                            <img src="img/test.png" style="max-width: 50px;max-height: 50px;">
                        </div>
                        <div style="margin-top: 18px;">保险柜</div>
                    </div>
                    <div class="xuqiu-item">
                        <div class="item-bgd">
                            <img src="img/test.png" style="max-width: 50px;max-height: 50px;">
                        </div>
                        <div style="margin-top: 18px;">保险柜</div>
                    </div>
                </div>
                <div class="xuqiu-foot">- 问题选项全部加载完成 -</div>
                <div style="font-size: 16px;margin-top: 53px;color: #F58220;">我还有个性化的想法和需求？(选填）</div>
                <input type="text" class="xuqiu-input">
            </div>
            <img src="img/bgd.png" style="width: 778px;height: 646px; border-radius: 30px;">
        </div>
        <div class="you-addr"><span style="font-weight: bold;">您当前在：</span>第一间卧室（主卧）</div>
        <div class="xuqiu-button-foot">
            <div class="xuqiu-button">上一题</div>
            <div class="xuqiu-button">下一题</div>
        </div>
    </div>
    <div class="navigation" id="navigation" onmouseleave="moveOutNavigation()">
        <div class="navigation-top"></div>
        <div class="navigation-content">
            <div class="navigation-item">
                <img src="img/baogao@2x.png" style="width: 23px;height: 25px;margin-right: 35px;">
                <div>调研报告</div>
            </div>
            <div class="navigation-heng"></div>
            <div class="navigation-item">
                <img src="img/tuichu@2x.png" style="width: 23px;height: 25px;margin-right: 35px;">
                <div>退出登录</div>
            </div>
        </div>
    </div>
    <div class="foot">Copyright © 2021 All rights reserved.蜗牛渼家 用户需求调研与分析系统</div>
    <div class="edge-space" onclick="changeSpace()">切换空间</div>
    <div class="edge-space-2" onclick="addSpace()"> 新增空间</div>
    <div class="show-info" id="showInfo">
        <img src="img/bgd.png" style="width: 100%;height: 100%;border-radius: 30px;">
    </div>
    <div class="add-space" id="addSpace">
        <div class="add-button"><span>新增空间</span></div>
        <div style="margin-top: 19px;font-size: 20px;">请您选择希望新增的空间，并点击确认</div>
        <div class="space-list">
            <div class="space-item">阳台</div>
            <div class="space-item">卧室</div>
            <div class="space-item space-selected">卫生间</div>
            <div class="space-item">书房/多功能</div>
            <div class="space-item">儿童房</div>
        </div>
        <div class="space-sure" onclick="spaceSure()"><span>确定</span></div>
    </div>
    <div class="change-space" id="changeSpace">
        <div class="add-button"><span>切换空间</span></div>
        <div class="space-list" style="margin-top: 101px;">
            <div class="space-item">
                <div style="margin-right: 20px;width: 490px;text-align: center;">玄关</div>
                <div style="font-size: 20px;width: 150px;margin-left: -150px;color: rgba(255, 255, 255, 0.6);">已完成</div>
            </div>
            <div class="space-item">
                <div style="margin-right: 20px;width: 490px;text-align: center;">厨房空间</div>
                <div style="font-size: 20px;width: 150px;margin-left: -150px;color: rgba(255, 255, 255, 0.6);">已完成</div>
            </div>
            <div class="space-item">
                <div style="margin-right: 20px;width: 490px;text-align: center;">客厅空间</div>
                <div style="font-size: 20px;width: 150px;margin-left: -150px;color: rgba(255, 255, 255, 0.6);">已完成</div>
            </div>
            <div class="space-item">
                <div style="margin-right: 20px;width: 490px;text-align: center;">餐饮空间</div>
                <div style="font-size: 20px;width: 150px;margin-left: -150px;color: rgba(255, 255, 255, 0.6);"></div>
            </div>
            <div class="space-item">
                <div style="margin-right: 20px;width: 490px;text-align: center;">阳台</div>
                <div style="font-size: 20px;width: 150px;margin-left: -150px;color: rgba(255, 255, 255, 0.6);"></div>
            </div>
        </div>
        <div class="change-button-list">
            <span class="change-button" onclick="changeSpaceSure()" >确定</span>
            <span class="change-button" onclick="changeSpaceSure()" >取消</span>
        </div>
    </div>
</body>
<script>
    let navigationShow = true
    function showNavigation() {
        if (navigationShow == true) {
            document.getElementById("navigation").style.display = "block";
            navigationShow = false
        } else {
            document.getElementById("navigation").style.display = "none";
            navigationShow = true
        }
    }
    function moveOutNavigation() {
        document.getElementById("navigation").style.display = "none";
        navigationShow = true
    }

    function mouseOver() {
        document.getElementById("showInfo").style.display = "block";
    }

    function mouseOut() {
        document.getElementById("showInfo").style.display = "none";
    }
    function addSpace() {
        document.getElementById("addSpace").style.display = "flex";
    }
    function spaceSure() {
        document.getElementById("addSpace").style.display = "none";
    }
    function changeSpace() {
        document.getElementById("changeSpace").style.display = "flex";
    }
    function changeSpaceSure() {
        document.getElementById("changeSpace").style.display = "none";
    }
</script>
</html>